<template>
    <view class="page-order-detail bg-content">
        <div style="height: 100%;" v-if="tbOrder && tbOrder.id">
            <div style="background: #ffffff; margin-bottom: 5px;">
                <div style="text-align: center; line-height: 3; border-bottom: 1px solid #eeeeee; font-size: 28rpx;">
                    <label v-if="'0'.indexOf(tbOrder && tbOrder.status) != -1">
                        剩余
                        <u-count-down separator="zh" :show-days="false"
                                      separator-size="28" font-size="28" :hide-zero-day="true"
                                      :timestamp="tbOrder.lastUpdateTimestamp + 86400"></u-count-down>
                        自动取消订单
                    </label>
                    <label v-if="'2'.indexOf(tbOrder && tbOrder.status) != -1">
                        剩余
                        <u-count-down separator="zh" :show-days="(tbOrder.lastUpdateTimestamp + 86400 * 10) > 86400"
                                      separator-size="28" font-size="28" :hide-zero-day="true"
                                      :timestamp="tbOrder.lastUpdateTimestamp + 86400 * 10"></u-count-down>
                        自动确认收货
                    </label>
                    <label v-if="'3'.indexOf(tbOrder && tbOrder.status) != -1">
                        剩余
                        <u-count-down separator="zh" :show-days="(tbOrder.lastUpdateTimestamp + 86400 * 10) > 86400"
                                      separator-size="28" font-size="28" :hide-zero-day="true"
                                      :timestamp="tbOrder.lastUpdateTimestamp + 86400 * 10"></u-count-down>
                        自动完成交易
                    </label>
                </div>
                <u-cell-item :arrow="false" use-label-slot :title="'收货地址'">
                    <u-icon slot="icon" size="45" name="map" style="padding-right: 10px;"></u-icon>
                    <view slot="label">
                        <view>{{tbOrder.consignee}}&nbsp;&nbsp;{{tbOrder.phone}}</view>
                        <view>
                            {{tbOrder.provinceName}}{{tbOrder.cityName}}{{tbOrder.areaName}}{{tbOrder.address}}
                        </view>
                    </view>
                </u-cell-item>
                <u-cell-item :arrow="false" use-label-slot :title="'物流信息'" @click="gotoOrderDetailLogistics(tbOrder)"
                             v-if="tbOrder.deliveryType">
                    <u-icon slot="icon" size="45" name="car" style="padding-right: 10px;"></u-icon>
                    <view slot="label">
                        <view v-if="tbOrder.deliveryType === '0'">
                            线下派送
                        </view>
                        <view v-if="(tbOrder.deliveryType === '1' && !tbOrder.tbLogisticsTraces) || (tbOrder.deliveryType === '1' && tbOrder.tbLogisticsTraces.status !== '0')">
                            {{tbOrder.logisticsCompanyName}}：{{tbOrder.tbLogisticsTracesText}}
                        </view>
                    </view>
                    <u-icon slot="right-icon" size="45" name="arrow-right" style="padding-left: 20px;" v-if="tbOrder.deliveryType === '1'"></u-icon>
                </u-cell-item>
            </div>
            <view class="order">
                <view class="top">
                    <view class="left" @click="navigateTo('/pages/common/store/index', {storeId: tbOrder.tbStore.id})">
                        <u-icon name="/pages/sub/sub1-tabs/static/icon/shop.png" :size="40" color="rgb(94,94,94)"></u-icon>
                        <view class="store">{{ tbOrder.tbStore.name }}</view>
                        <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                    </view>
                    <view class="right"></view>
                </view>
                <view class="item" v-for="(tbOrderGoods, i) in tbOrder.tbOrderGoodsList" :key="tbOrderGoods.id"
                      @click.stop.prevent="gotoGoodsDetail(tbOrderGoods.goodsId)">
                    <view class="left">
                        <image :src="tbOrderGoods.image ? tbOrderGoods.image + '?imageView2/1/w/300/h/300' : '/pages/sub/sub1-tabs/static/default-image/goods.jpg'"
                               mode="aspectFill"></image>
                    </view>
                    <view class="content">
                        <view class="title u-line-2">{{ tbOrderGoods.title }}</view>
                        <view class="type">
                            {{tbOrderGoods.specName}}<label v-if="tbOrderGoods.colorId">;{{tbOrderGoods.colorName}}</label>
                        </view>
                        <view class="delivery-time">
                            <div v-if="tbOrderGoods.promotionIf" style="text-align: right;">
                                {{tbOrderGoods.promotionIf}}
                            </div>
                        </view>
                    </view>
                    <view class="right">
                        <view class="price">
                            ￥{{ tbOrderGoods.price | toFixed2 }}
                        </view>
                        <view class="number">x{{ tbOrderGoods.quantity }}</view>
                    </view>
                </view>
                <view class="total">
                    <div>共{{tbOrder.quantity}}件商品&nbsp;&nbsp;合计：￥{{tbOrder.money | toFixed2}}</div>
                    <div v-if="tbOrder.promotionIf">{{tbOrder.promotionIf}}</div>
                    <div v-if="tbOrder.reduceMoney">促销活动减免：￥-{{tbOrder.reduceMoney | toFixed2}}</div>
                    <div v-if="tbOrder.couponMoney">优惠券减免：￥-{{tbOrder.couponMoney | toFixed2}}</div>
                    <div v-if="tbOrder.freightMoney">快递：￥{{tbOrder.freightMoney | toFixed2}}</div>
                    <div>
                        实付:
                        <text class="total-price">
                            ￥{{ tbOrder.payMoney | toFixed2 }}
                        </text>
                    </div>
                </view>
            </view>

            <div style="background: white; padding: 10px; margin-top: 5px; margin-bottom: 10px;" v-if="tbOrder.remark">
                <div style="margin: 5px 0px;">用户备注：{{tbOrder.remark}}</div>
            </div>

            <div style="background: white; padding: 10px; margin-top: 5px;">
                <div style="margin: 5px 0px;">订单编号：{{tbOrder.code}}</div>
                <div style="margin: 5px 0px;">创建时间：{{tbOrder.createTime}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.payModeText">支付方式：{{tbOrder.payModeText}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.payMode === '0' && tbOrder.payMoney">实付金额：￥{{tbOrder.payMoney | toFixed2}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.payMode === '0' && tbOrder.payTime">支付时间：{{tbOrder.payTime}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.payMode === '0' && tbOrder.payTradeNo">支付流水号：{{tbOrder.payTradeNo}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.status === '4'">交易完成时间：{{tbOrder.lastUpdateTime}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.status === '5'">退款时间：{{tbOrder.lastUpdateTime}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.status === '6'">取消时间：{{tbOrder.lastUpdateTime}}</div>
                <div style="margin: 5px 0px;" v-if="tbOrder.tbStore.phone">联系卖家：{{tbOrder.tbStore.phone}}</div>
            </div>

            <div style="height: 60px;"></div>

            <div v-if="tbOrder.enableOperation">
                <div class="custom-bottom-bar">
                    <div class="order-btn-group" style="width: 100%; text-align: right;">
                        <u-button plain size="mini" v-if="tbOrder.status === '0'"
                                  @click="updateStatus(tbOrder, '6', '是否确认取消订单？')">取消订单
                        </u-button>

                        <u-button plain type="error" size="mini" v-if="tbOrder.status === '0'"
                                  @click="immediatelyPay(tbOrder)">立即支付
                        </u-button>

                        <!--直接退款-->
                        <u-button plain size="mini" v-if="tbOrder.status === '1' && tbOrder.tbStore.isSupportRefund"
                                  @click="applyRefund(tbOrder)">
                            申请退款
                        </u-button>

                        <u-button plain size="mini" v-if="'1,2'.indexOf(tbOrder.status) != -1"
                                  @click="updateStatus(tbOrder, '3', '是否确认收货？')">
                            确认收货
                        </u-button>

                        <u-button plain size="mini" v-if="'3,4'.indexOf(tbOrder.status) != -1 && !tbOrder.isComment"
                                  @click="gotoOrderGoodsComment(tbOrder)">
                            评价
                        </u-button>
                    </div>
                </div>
            </div>
        </div>

        <immediatelyPay ref="immediatelyPayRef"></immediatelyPay>
    </view>
</template>

<script>

    import immediatelyPay from '@/components/immediately-pay.vue'
    import {TbOrderService} from "@/dev/services/tb-order.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";

    export default {
        data() {
            return {
                tbOrder: {
                    status: "-1"
                }
            }
        },
        components: {
            immediatelyPay
        },
        onShow() {
            if (this.objParams.id) {
                this.tbOrder = this.objParams;
                this.tbOrder.lastUpdateTimestamp = parseInt((CommonUtil.datetimeStrToTimestamp(this.tbOrder.lastUpdateTime) - new Date().getTime()) / 1000);
                if (this.tbOrder.refundStatusText) {
                    this.tbOrder.refundLastUpdateTimestamp = parseInt((CommonUtil.datetimeStrToTimestamp(this.tbOrder.refundLastUpdateTime) - new Date().getTime()) / 1000);
                }
                uni.setNavigationBarTitle({
                    title: this.objParams.statusText
                });
            } else {
                this.findOrderDetail(this.urlParams.id);
            }
        },
        methods: {
            findOrderDetail(id) {
                const _self = this;
                new TbOrderService().findTableListCascade({
                    pagination: this.pagination,
                    data: {
                        id: id
                    }
                }).then(result => {
                    _self.tbOrder = result.list[0];
                    uni.setNavigationBarTitle({
                        title: _self.tbOrder.statusText
                    });

                    _self.tbOrder.lastUpdateTimestamp = parseInt((CommonUtil.datetimeStrToTimestamp(_self.tbOrder.lastUpdateTime) - new Date().getTime()) / 1000);
                    if (_self.tbOrder.refundStatusText) {
                        _self.tbOrder.refundLastUpdateTimestamp = parseInt((CommonUtil.datetimeStrToTimestamp(_self.tbOrder.refundLastUpdateTime) - new Date().getTime()) / 1000);
                    }
                })
            },
            applyRefund(tbOrder) {
                let itemList = [
                    "多拍、拍错、不想要",
                    "打算重拍",
                    "其他"
                ];
                uni.showActionSheet({
                    itemList: itemList,
                    success: function (res) {
                        console.log(res);
                        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
                        console.log(itemList[res.tapIndex]);
                        new TbOrderService().updateStatus({
                            id: tbOrder.id,
                            status: "5",
                            refundReason: itemList[res.tapIndex]
                        }).then(result => {
                            if (result.status === 'success') {
                                Object.assign(tbOrder, CommonUtil.deleteNullAttrInObject(result.data))
                            }
                            CommonUtil.alert(result.message);
                        });
                    },
                    fail: function (res) {
                        console.log(res.errMsg);
                    }
                });
            },
            /**
             * 更新订单状态
             */
            updateStatus(tbOrder, status, hint) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: hint,
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbOrderService().updateStatus({
                                id: tbOrder.id,
                                status: status,
                            }).then(result => {
                                if (result.status === 'success') {
                                    Object.assign(tbOrder, CommonUtil.deleteNullAttrInObject(result.data))
                                    CommonUtil.alert('操作成功');
                                } else {
                                    CommonUtil.alert(result.message);
                                }
                            });
                        }
                    }
                });
            },
            gotoGoodsDetail(id) {
                uni.navigateTo({
                    url: `/pages/common/goods-detail/index?id=${id}`
                })
            },
            gotoOrderGoodsComment(tbOrder) {
                this.navigateTo('/pages/sub/sub1-tabs/tabs/person/order/order-goods-comment/index', null, tbOrder)
            },
            immediatelyPay(tbOrder) {
                const _self = this;
                this.$refs.immediatelyPayRef.pay({
                    tbOrder: tbOrder,
                    callback: function (tbOrder, payResult) {
                        if (payResult) {
                            _self.findOrderDetail(tbOrder.id)
                        }
                    }
                });
            },
            gotoOrderDetailLogistics(tbOrder) {
                if (tbOrder.deliveryType === '1') {
                    let urlParams = {
                        logisticsCompanyName: tbOrder.logisticsCompanyName,
                        logisticsNo: tbOrder.logisticsNo,
                        tbLogisticsTracesText: tbOrder.tbLogisticsTracesText,
                    };
                    this.navigateTo(`/pages/sub/sub1-tabs/tabs/person/order/order-logistics/index`, urlParams, tbOrder.tbLogisticsTraces);
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>

<style lang="scss">
    .page-order-detail {
        .order-btn-group {
            padding-top: 12px;
            padding-right: 10px;
            display: unset !important;
            height: 40px;

            button {
                margin-left: 10px;
            }
        }
    }
</style>

